<template>
  <el-dialog title="沟通记录" :visible="visible" @close="closeHandle">
    <div class="form-container">
      <el-form v-model="form" ref="form" size="small" label-width="80px" label-position="left">
        <el-form-item label="选择模板">
          <el-select v-model="form.model">
            <el-option value="1" label="首次联系"></el-option>
            <el-option value="2" label="模板2"></el-option>
            <el-option value="3" label="模板3"></el-option>
          </el-select>
        </el-form-item>
        <div class="form-editor" style="height: 300px;">
           <vue-wangeditor id="editor" :options="options" v-model="form.content" ></vue-wangeditor>
        </div>
      </el-form>
      <div class="form-bottom t-right">
        <ui-button size="medium">取消</ui-button>
        <ui-button size="medium" type="blue">保存为自定义模板</ui-button>
        <ui-button size="medium" type="blue">保存</ui-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Form, FormItem, Input, Select, Option} from 'element-ui'
import VueWangeditor from 'vue-wangeditor-simple'
  export default {
    props: ['visible'],
    components: {
      [Dialog.name]: Dialog,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Input.name]: Input,
      [Select.name]: Select,
      [Option.name]: Option,
      VueWangeditor,
    },
    data () {
      return {
        form: {

        },
        options: {
          width: '100%',
          height: '250px',
        },
      }
    },
    methods: {
      closeHandle() {
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style>

 
</style>
